From e05f404fc52ea8dfae31462377e62f863feb1083 Mon Sep 17 00:00:00 2001 From: nana-4 Date: Fri, 15 Nov 2019 00:04:18 +0900 Subject: [PATCH] Adwaita: Fix emoji picker styling - Adjust the emoji picker appearance to be the same as gtk3's. - Fix button.emoji-section margins in RTL. - Prevent the .emoji hover effect from being applied to the entire nested popover. --- gtk/theme/Adwaita/_common.scss | 17 ++++++++--------- gtk/theme/Adwaita/gtk-contained-dark.css | 14 +++++++------- gtk/theme/Adwaita/gtk-contained.css | 14 +++++++------- 3 files changed, 22 insertions(+), 23 deletions(-) diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss index 25e7615057..7b6500e1ae 100644 --- a/gtk/theme/Adwaita/_common.scss +++ b/gtk/theme/Adwaita/_common.scss @@ -4711,11 +4711,10 @@ stackswitcher.circular { * Emoji * ********/ -popover.emoji-picker { - padding-left: 0; - padding-right: 0; +popover.emoji-picker > contents { + padding: 0; - entry.search { margin: 3px 5px 5px 5px; } + entry.search { margin: 5px; } } button.emoji-section { @@ -4724,7 +4723,7 @@ button.emoji-section { border-style: none none solid; border-radius: 0; - margin: 2px 4px 2px 4px; + margin: 2px 8px 4px; padding: 3px 0 0; min-width: 32px; min-height: 28px; @@ -4736,8 +4735,8 @@ button.emoji-section { outline-offset: -5px; - &:first-child { margin-left: 7px; } - &:last-child { margin-right: 7px; } + &:dir(ltr):not(:last-child) { margin-right: 0; } + &:dir(rtl):not(:last-child) { margin-left: 0; } &:backdrop:not(:checked) { border-color: transparent; } &:hover { border-color: if($variant == 'light', $borders_color, transparentize($fg_color, .9)); } @@ -4756,10 +4755,10 @@ button.emoji-section { popover.emoji-picker .emoji { font-size: x-large; padding: 6px; + border-radius: 6px; - :hover { + &:hover { background: $selected_bg_color; - border-radius: 6px; } } diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css index 5f96236896..c11db9371e 100644 --- a/gtk/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/theme/Adwaita/gtk-contained-dark.css @@ -2043,15 +2043,15 @@ stackswitcher.circular > button.circular, stackswitcher.circular > button.text-b .icon-dropshadow { -gtk-icon-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.7); } /********* Emoji * */ -popover.emoji-picker { padding-left: 0; padding-right: 0; } +popover.emoji-picker > contents { padding: 0; } -popover.emoji-picker entry.search { margin: 3px 5px 5px 5px; } +popover.emoji-picker > contents entry.search { margin: 5px; } -button.emoji-section { border-color: transparent; border-width: 3px; border-style: none none solid; border-radius: 0; margin: 2px 4px 2px 4px; padding: 3px 0 0; min-width: 32px; min-height: 28px; /* reset props inherited from the button style */ background: none; box-shadow: none; text-shadow: none; outline-offset: -5px; } +button.emoji-section { border-color: transparent; border-width: 3px; border-style: none none solid; border-radius: 0; margin: 2px 8px 4px; padding: 3px 0 0; min-width: 32px; min-height: 28px; /* reset props inherited from the button style */ background: none; box-shadow: none; text-shadow: none; outline-offset: -5px; } -button.emoji-section:first-child { margin-left: 7px; } +button.emoji-section:dir(ltr):not(:last-child) { margin-right: 0; } -button.emoji-section:last-child { margin-right: 7px; } +button.emoji-section:dir(rtl):not(:last-child) { margin-left: 0; } button.emoji-section:backdrop:not(:checked) { border-color: transparent; } @@ -2065,9 +2065,9 @@ button.emoji-section:hover label { opacity: 0.775; } button.emoji-section:checked label { opacity: 1; } -popover.emoji-picker .emoji { font-size: x-large; padding: 6px; } +popover.emoji-picker .emoji { font-size: x-large; padding: 6px; border-radius: 6px; } -popover.emoji-picker .emoji :hover { background: #15539e; border-radius: 6px; } +popover.emoji-picker .emoji:hover { background: #15539e; } popover.emoji-completion contents row box { border-spacing: 10px; padding: 2px 10px; } diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css index 760b36be32..2593a4c41a 100644 --- a/gtk/theme/Adwaita/gtk-contained.css +++ b/gtk/theme/Adwaita/gtk-contained.css @@ -2059,15 +2059,15 @@ stackswitcher.circular > button.circular, stackswitcher.circular > button.text-b .icon-dropshadow { -gtk-icon-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.7); } /********* Emoji * */ -popover.emoji-picker { padding-left: 0; padding-right: 0; } +popover.emoji-picker > contents { padding: 0; } -popover.emoji-picker entry.search { margin: 3px 5px 5px 5px; } +popover.emoji-picker > contents entry.search { margin: 5px; } -button.emoji-section { border-color: transparent; border-width: 3px; border-style: none none solid; border-radius: 0; margin: 2px 4px 2px 4px; padding: 3px 0 0; min-width: 32px; min-height: 28px; /* reset props inherited from the button style */ background: none; box-shadow: none; text-shadow: none; outline-offset: -5px; } +button.emoji-section { border-color: transparent; border-width: 3px; border-style: none none solid; border-radius: 0; margin: 2px 8px 4px; padding: 3px 0 0; min-width: 32px; min-height: 28px; /* reset props inherited from the button style */ background: none; box-shadow: none; text-shadow: none; outline-offset: -5px; } -button.emoji-section:first-child { margin-left: 7px; } +button.emoji-section:dir(ltr):not(:last-child) { margin-right: 0; } -button.emoji-section:last-child { margin-right: 7px; } +button.emoji-section:dir(rtl):not(:last-child) { margin-left: 0; } button.emoji-section:backdrop:not(:checked) { border-color: transparent; } @@ -2081,9 +2081,9 @@ button.emoji-section:hover label { opacity: 0.775; } button.emoji-section:checked label { opacity: 1; } -popover.emoji-picker .emoji { font-size: x-large; padding: 6px; } +popover.emoji-picker .emoji { font-size: x-large; padding: 6px; border-radius: 6px; } -popover.emoji-picker .emoji :hover { background: #3584e4; border-radius: 6px; } +popover.emoji-picker .emoji:hover { background: #3584e4; } popover.emoji-completion contents row box { border-spacing: 10px; padding: 2px 10px; } -- 2.30.2